//观察者
class Watcher{
    constructor(expr,vm,callback){
        this.expr=expr;//vue指令
        this.vm=vm;
        this.callback=callback;
        this.oldValue = this.getOldVal()
    }
    //获取旧值
    getOldVal(){
        Dep.target=this;
        const oldVal = compileUtils.getVal(this.expr,this.vm);
        Dep.target=null;
       return oldVal
    }
    //更新视图
    update(){
        const newVal=compileUtils.getVal(this.expr,this.vm);
        if(newVal!==this.oldValue){
              this.callback(newVal);
              this.oldValue=newVal;
        }
    }
}


//中间处理对象
class Dep{
    constructor(){
        this.observers=[];//保存所有的观察者
    }
    //添加观察者
    addObserver(watcher){
       this.observers.push(watcher);
    }
    //通知观察者变化
    notify(){
        console.log(this.observers,'watcher')
       this.observers.forEach(item=>item.update())
    }
}

// 劫持所有属性
class Observer {
    constructor(data) {
        this.observer(data);
    }
    //获取所有属性
    observer(data) {
        if (Object.prototype.toString.call(data).includes('Object')) {
            Object.keys(data).forEach(item => {
                this.dataReactive(data,item,data[item])
            })
        }

    }
    //数据劫持
    dataReactive(obj,key,value) {
        let dep = new Dep();
        this.observer(value); //劫持下面的子对象
        Object.defineProperty(obj,key,{
            configurable:false,//是否可删除
            enumerable:true,//是否可以遍历
            get(){
                //添加观察者
                Dep.target && dep.addObserver(Dep.target)
                return value;
            },
            set:(newVal)=>{
                if(newVal!==value){
                   this.observer(newVal); //劫持新的对象
                   value=newVal;
                   dep.notify();
                }
            }
        })
    }
}